<template>
	<view class="jiudiandetailcontainer" v-show="showMain">
		<view v-if="state==0" style="position: relative;">
			<u-swiper height= "569rpx" :list="dataAll.images_text" indicator indicatorMode="line" imgMode="scaleToFill"  bgColor="#fafafa"></u-swiper>
		    <view class="center1 flexleft">
		    	<view class="HCA" @click="changestate">民宿图片</view>
		    	<view class="viddeo"  @click="changestate1">民宿视频</view>
		    </view>
		</view>
		<view v-if="state==1" style="position: relative;">
			<u-swiper height= "569rpx" :list="videourl" keyName="url" :autoplay="false" :circular="true" ></u-swiper>
		    <view class="center1 flexleft">
		    	<view class="HCA1" @click="changestate">民宿图片</view>
		    	<view class="viddeo1"  @click="changestate1">民宿视频</view>
		    </view>
		</view>
		<view class="maincontainer">
			<view class="dianname">{{dataAll.name}}</view>
			<view class="pinglun flexbetween">
				<view class="left flexbottom">
					<view class="pingfen">{{dataAll.star}}</view>
					<view class="pingnum">{{dataAll.comment_count}}评论</view>
				</view>
				<view class="right flexcenter" @click="jumpurl(listid)">
					<view class="lookpinglun">查看全部评论</view>
					<view class="rightarrow flexcenter">
						<image class="arrow" src="../../static/images/hotel/rightaarrow.png"></image>
					</view>
				</view>
			</view>
			<view class="telist flexleft">
				<view class="hotelte " v-for="item in dataAll.tags" :key="item.id">{{item.name}}</view>
			</view>
			<view class="flexbetween mainbottom">
				<view class="mbleft">
					<view class="julii flexleft">
						<u-icon name="map"></u-icon>
						<view>距您{{juli}}km</view>
					</view>
					<view class="dizhi flexcenter" style="margin-top: 17rpx;">
						<u-icon name="home"></u-icon>
						<view>{{dataAll.address}}</view>
					</view>
				</view>
				<view class="mbright flexcenter">
					<view class="daohang" @click="openlocation">
						<image class="img1" src="../../static/images/hotel/daohang.png"></image>
						<view style="margin-top: 2rpx;">导航</view>
					</view>
					<view class="dianhua" @click="phone(dataAll.tel)">
						<image class="img1" src="../../static/images/hotel/phone.png"></image>
						<view style="margin-top: 2rpx;">电话</view>
					</view>
				</view>
			</view>
		</view>
		<view class="middlee flexbetween" @click="open">
			<view class="zhutime flexcenter">
				<view class="time">{{startime}}</view>
				<view class="dayfont">{{startweek}}</view>
				<view class="yiwan">
					{{daynum}}晚
				</view>
				<view class="time">{{endtime}}</view>
				<view class="dayfont">{{endweek}}</view>
			</view>
			<image src="../../static/images/hotel/rightaarrow.png" class="arrow"></image>
		</view>
		<view class="list">
			<view class="flexcenter1" v-if="!dataAll.shop_type.length">
				<view class="placeholderimg" style="margin-top: 300rpx;">
					<image src="../../static/images/bg-icons/placeholderimg.png" mode=""></image>
				</view>
				<view class="zanwushuju">暂无数据~</view>
			</view>
			<view class=" flexbetween1 item " v-for="item in dataAll.shop_type" :key="item.id" @click="goroomdetail(item.id)">
				<view class="flextop">
					<view class="lefimg">
						<image :src="item.image_text"></image>
					</view>
					<view class="tsquare">
						<view class="title">{{item.name}}</view>
						<view class="qure">{{item.attention}}</view>
					</view>
				</view>
				<view>
					<view class="dingImg flexbottom" @click.stop="bookFn(item.id)">
						<view class="price">￥{{item.salesprice}}/<text style="font-size: 24rpx;">晚</text></view>
						<image class="ding" src="../../static/images/scenic/ding.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<u-calendar color="#00D2E1" startText="入住" endText="离店" :mode="mode" confirmText="确认选择"
			confirmDisabledText="确认选择" :show="show" @confirm="confirm" @close="close"></u-calendar>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	const QQMapWX = require('@/common/qqmap-wx-jssdk.min.js');
	// 实例化API核心类
	const qqmapsdk = new QQMapWX({
		key: 'MMFBZ-E43YQ-5GX5K-GR5DT-OAEAK-5XB4N' // 必填
	});
	export default {
		data() {
			return {
				show: false,
				mode: 'range',
				lat: "",
				lng: "",
				listid: "",
				city_text: "", //当前城市信息
				currentAddress: "", //当前位置
				start: "", //年月日
				end: "", //年月日
				startime: "", //开始时间
				endtime: "", //结束时间
				startweek: "", //开始周
				endweek: "", //结束周
				daynum: 1,
				juli:'',
				dataAll: {},
				videourl:[],
				state:0,//控制图片，视频显示 0 图片 1 视频
				
				showMain:false,
			};
		},
		onLoad(options) {
			let data = JSON.parse(decodeURIComponent(options.msg));
			this.listid = data.id
			this.start = data.start
			this.end = data.end
			this.startime = data.startime
			this.endtime = data.endtime
			this.startweek = data.startweek
			this.endweek = data.endweek
			this.daynum = data.daynum
			this.juli=data.juli
			this.getlocation()
		},
		methods: {
			open(){
				this.show = true
			},
			close(){
				this.show = false
			},
			changestate(){
				this.state=0
			},
			changestate1(){
				this.state=1
				console.log(this.dataAll.video_url_text)
			},
			// 跳转全部评论
			jumpurl(id){
				uni.navigateTo({
					url:"/pages/hotel/pinglun?id="+id
				})
			},
			openlocation(){
				uni.openLocation({
				     latitude: Number(this.dataAll.latitude),//即将传到高德或腾讯地图的终点纬度  必须是数值，字符串无效
				     longitude:Number(this.dataAll.longitude),//即将传到高德或腾讯地图的终点经度  必须是数值，字符串无效
				     name: this.dataAll.name,//即将传到高德或腾讯地图的店铺名称
				     address: this.dataAll.address,//即将传到高德或腾讯地图的详细地址
				     scale: 18
				})
			},
			phone(p) {
				uni.makePhoneCall({
					phoneNumber: p.toString()
				}).catch((e) => {
					// console.log(e)  //用catch(e)来捕获错误{makePhoneCall:fail cancel}
				})
			},
			// 小程序获取当前位置信息
			getlocation() {
				let _this = this
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success: function(res) {
						//逆地址解析  坐标转地址信息
						_this.lat = res.latitude
						_this.lng = res.longitude
						_this.init()
						qqmapsdk.reverseGeocoder({
							//Object格式
							location: {
								latitude: res.latitude,
								longitude: res.longitude
							},
							success: function(res) { //成功后的回调
								const mapdata = res.result.address_component;
								_this.city_text = mapdata.city; //省地址
								_this.currentAddress = res.result.address //详细地址
							},
							fail: function(error) {
								console.error(error);
							},
							complete: function(res) {
								//console.log(res);
							}
						});

					}
				});
			},
			init() {
				httpRequest.request('api/shop/detail', 'GET', {
					id: this.listid,
				}, false, false, false).then(res => {
					this.showMain=true
					this.dataAll = res.data
					this.videourl.push(res.data.video_url_text)
				}).catch(err => {
					this.showMain=true
					httpRequest.toast(err.msg);
				})
			},
			goroomdetail(id) {
				let date = {
					id,
					start:this.start,
					end:this.end,
					startime: this.startime, //开始时间
					endtime: this.endtime, //结束时间
					startweek: this.startweek, //开始周
					endweek: this.endweek, //结束周
					daynum: this.daynum,
				}
				uni.navigateTo({
					url: '/pages/hotel/roomdetail?msg=' + encodeURIComponent(JSON.stringify(date))
				})
			},
			// 预定
			bookFn(id){
				if (!httpRequest.checkIsLogin()) {
				 httpRequest.doLogin();
				 return false;
				}else{
				 let date = {
					id,
					start:this.start,
					end:this.end,
					startime: this.startime, //开始时间
					endtime: this.endtime, //结束时间
					startweek: this.startweek, //开始周
					endweek: this.endweek, //结束周
					daynum: this.daynum,
				 }
				uni.navigateTo({
					url: '/pages/hotel/yuding?msg=' + encodeURIComponent(JSON.stringify(date))
				})
			}
			},
			// 时间选择确定
			confirm(e) {
				let start = e[0]
				let end = e[e.length - 1]
				this.startime = Number(start[5] + start[6]) + "月" + Number(start[8] + start[9]) + "日" //月日赋值
				this.endtime = Number(end[5] + end[6]) + "月" + Number(end[8] + end[9]) + "日" //月日赋值
				this.start = start
				this.end = end
				this.startweek = this.weekchange(start) //计算周
				this.endweek = this.weekchange(end) //计算周
				this.daynum = this.DateDiff(start, end) //计算间隔天数
				this.show = false
			},
			// 日期初始化
			dateinit() {
				// 今天
				let start = this.date(new Date())
				let end = new Date()
				// 明天
				end.setTime(end.getTime() + 24 * 60 * 60 * 1000);
				end = this.date(end)
				this.start = start
				this.end = end
				this.startime = Number(start[5] + start[6]) + "月" + Number(start[8] + start[9]) + "日" //月日赋值
				this.endtime = Number(end[5] + end[6]) + "月" + Number(end[8] + end[9]) + "日" //月日赋值
				this.startweek = this.weekchange(start) //计算周
				this.endweek = this.weekchange(end) //计算周
				this.daynum = this.DateDiff(start, end) //计算间隔天数
			},
			date(timer) {
				var date = new Date(timer); //当前时间
				var year = date.getFullYear() //返回指定日期的年份
				var month = repair(date.getMonth() + 1); //月
				var day = repair(date.getDate()); //日
				var curTime = year + "-" + month + "-" + day

				function repair(i) {
					if (i >= 0 && i <= 9) {
						return "0" + i;
					} else {
						return i;
					}
				}
				return curTime
			},
			// 周转换，此处地date是年月日
			weekchange(date) {
				let weekArrayList = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六', ]
				let index = new Date(date).getDay()
				let week = weekArrayList[index]
				return week
			},
			// 计算两个日期之间相差天数
			DateDiff(sDate1, sDate2) {
				//sDate1和sDate2是2006-12-18格式
				var aDate1, aDate2, oDate1, oDate2, iDays;
				aDate1 = sDate1.split("-");
				oDate1 = new Date(aDate1[1] + '/' + aDate1[2] + '/' + aDate1[0]);
				aDate2 = sDate2.split("-");
				oDate2 = new Date(aDate2[1] + '/' + aDate2[2] + '/' + aDate2[0]);
				iDays = parseInt(Math.abs(oDate1 - oDate2) / 1000 / 60 / 60 / 24);
				return iDays
			}
		}
	}
</script>

<style lang="scss" scoped>
	.center1{
		position: absolute;
		top: 380rpx;
		left: 24rpx;
	}
	.HCA{
		font-size: 20rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #228DFF;
		padding: 8rpx 18rpx 8rpx 18rpx;
		background: #FFFFFF;
		border-radius: 42rpx 42rpx 42rpx 42rpx;
		position: relative;
		left:20rpx;
	}
	.HCA1{
		font-size: 20rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #fff;
		padding: 8rpx 30rpx 8rpx 20rpx;
		background:rgba(0, 0, 0, 0.3);
		border-radius: 42rpx 42rpx 42rpx 42rpx;	
	}
	.viddeo{
		font-size: 20rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #fff;
		padding: 8rpx 20rpx 8rpx 30rpx;
		background:rgba(0, 0, 0, 0.3);
		border-radius: 42rpx 42rpx 42rpx 42rpx;	
	}
	.viddeo1{
		font-size: 20rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #228DFF;
		padding: 8rpx 18rpx 8rpx 18rpx;
		background: #FFFFFF;
		border-radius: 42rpx 42rpx 42rpx 42rpx;
		position: relative;
		left:-20rpx;
	}
	.jiudiandetailcontainer {
		min-height: 100vh;
		background-color: #FAFAFA;
		box-sizing: border-box;
	}

	.titleimg {
		width: 100vw;
		height: 569rpx;
	}

	.maincontainer {
		border-radius: 39rpx 39rpx 0 0;
		position: absolute;
		background-color: #FFFFFF;
		top: 482rpx;
		width: 100vw;
		padding: 30rpx;
		box-sizing: border-box;
	}

	.dianname {
		font-size: 32rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
		line-height: 38rpx;
	}

	.pinglun {
		margin-top: 16rpx;

		.left {
			.pingfen {
				font-size: 26rpx;
				font-family: PingFang SC-Heavy, PingFang SC;
				font-weight: 800;
				color: #FFFFFF;
				line-height: 30rpx;
				background-color: rgba(0, 210, 225, 1);
				margin-right: 21rpx;
				padding:4rpx;
			}

			.pingnum {
				font-size: 24rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #666666;
				line-height: 28rpx;
				white-space: nowrap;
			}
		}

		.right {
			.lookpinglun {
				font-size: 24rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #999999;
				line-height: 28rpx;
			}

			.rightarrow {
				padding-left: 15rpx;
			}
		}
	}

	.arrow {
		width: 10rpx;
		height: 17rpx;
	}

	.telist {
		margin-top: 20rpx;

		.hotelte {
			background-color: #F0F0F0;
			font-size: 22rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #666666;
			line-height: 26rpx;
			margin-right: 28rpx;
			padding: 2rpx 10rpx;
		}
	}

	.mainbottom {
		margin-top: 52rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 28rpx;
	}

	.img {
		width: 20rpx;
		height: 20rpx;
	}

	.img1 {
		width: 52rpx;
		height: 52rpx;
	}

	.daohang {
		padding-right: 40rpx;
	}

	.time {
		font-size: 37rpx;
		font-family: DIN-Bold, DIN;
		font-weight: bold;
		color: #000000;
		line-height: 43rpx;
	}

	.middlee {
		margin-top: 290rpx;
		padding: 30rpx;
		background-color: #FFFFFF;
	}

	.dayfont {
		font-size: 22rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		line-height: 26rpx;
		padding-left: 17rpx;
	}

	.yiwan {
		margin: 0 40rpx;
		background: #E7E7E7;
		border-radius: 17rpx 17rpx 17rpx 17rpx;
		text-align: center;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		line-height: 28rpx;
		padding: 2rpx 25rpx;
	}

	.item {
		padding: 30rpx;
		margin-top: 30rpx;
		background-color: #FFFFFF;

		.price {
			font-size: 36rpx;
			font-family: PingFang SC-Heavy, PingFang SC;
			font-weight: 800;
			color: #FF5C00;
			line-height: 28rpx;
			margin-right: 10rpx;
		}

		.dingImg {
			display: flex;
			justify-content: flex-end;

			.ding {
				width: 86rpx;
				height: 86rpx;
			}
		}
	}

	.lefimg {
		width: 199rpx;
		height: 228rpx;
		min-width: 199rpx;
		max-width: 199rpx;
		min-height: 228rpx;
		max-height: 228rpx;
		margin-right: 24rpx;
		border-radius: 10rpx;
		image {
			border-radius: 10rpx;
			width: 100%;
			height: 100%;
		}
	}

	.tsquare {
		display: flex;
		flex-direction: column;

		.title {
			font-size: 32rpx;
			font-family: PingFang SC-Heavy, PingFang SC;
			font-weight: 800;
			color: #000000;
			line-height: 38rpx;
		}

		.qure {
			margin-top: 19rpx;
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #666666;
			line-height: 28rpx;
		}
	}
</style>
